@namespace BulmaRazor.Components
@inherits BulmaComponentBase

<article @attributes="Attributes" class="@classes">

    @if (Parent != null && Parent.IsHeaderToggle)
    {
        <div class="message-header">
            <a  data-target="@Id" style="text-decoration:none;" class="@B.Flex @B.JustifyContentSpaceBetween @B.FlexGrow1" data-action="collapse">
                @if (HeaderSlot != null)
                {
                    <p>@HeaderSlot</p>
                }
                else
                {
                    <p>@HeaderText</p>
                }
                <Icon IconClass="fa fa-angle-down fa-lg"></Icon>
            </a>
        </div>
    }
    else
    {
        <div class="message-header">
            @if (HeaderSlot != null)
            {
                <p>@HeaderSlot</p>
            }
            else
            {
                <p>@HeaderText</p>
            }
            <a href="#@Id" style="text-decoration:none;" data-action="collapse">
                <Icon IconClass="fa fa-angle-down fa-lg"></Icon>
            </a>
        </div>
    }

    <div @attributes="BodyAttr" class="message-body is-collapsible @(IsActive ? "is-active" : "")" id="@Id">
        <div class="message-body-content">
            @(ChildContent ?? BodySlot)
        </div>
    </div>
</article>

@code{

    string classes => CssBuilder.Default("message")
        .AddClassFromAttributes(Attributes)
        .AddClass(Color.Value)
        .AddClass("is-small", IsSmall)
        .AddClass("is-medium", IsMedium)
        .AddClass("is-large", IsLarge)
        .AddClass(ItemGap ?? Parent?.ItemGap)
        .Build();

    Dictionary<string, object> BodyAttr
    {
        get
        {
            var dict = new Dictionary<string, object>();
            if (Parent != null)
            {
                dict.Add("data-parent", Parent.Id);
                if (Parent.AllowMultiple)
                {
                    dict.Add("data-allow-multiple", "true");
                }
            }
            return dict;
        }
    }


    private readonly string Id = "collapse-item_" + Guid.NewGuid().ToString("N");

    [CascadingParameter]
    private Collapse Parent { get; set; }

    [Parameter]
    public string ItemGap { get; set; }

    [Parameter]
    public Color Color { get; set; } = Color.Default;


    [Parameter]
    public bool IsActive { get; set; }


    [Parameter]
    public bool IsSmall { get; set; }

    [Parameter]
    public bool IsMedium { get; set; }

    [Parameter]
    public bool IsLarge { get; set; }


    [Parameter]
    public string HeaderText { get; set; }

    [Parameter]
    public RenderFragment HeaderSlot { get; set; }

    [Parameter]
    public RenderFragment BodySlot { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public EventCallback<CollapseItem> BeforeExpand { get; set; }
    [Parameter]
    public EventCallback<CollapseItem> AfterExpand { get; set; }
    [Parameter]
    public EventCallback<CollapseItem> BeforeCollapse { get; set; }
    [Parameter]
    public EventCallback<CollapseItem> AfterCollapse { get; set; }
    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        Parent?.AddItem(this);
        JSCallbackManager.AddEventHandler(Id,"before:expand",new Func<Task>(()=> BeforeExpand.InvokeAsync(this)));
        JSCallbackManager.AddEventHandler(Id,"after:expand",new Func<Task>(()=> AfterExpand.InvokeAsync(this)));
        JSCallbackManager.AddEventHandler(Id,"before:collapse",new Func<Task>(()=> BeforeCollapse.InvokeAsync(this)));
        JSCallbackManager.AddEventHandler(Id,"after:collapse",new Func<Task>(()=> AfterExpand.InvokeAsync(this)));
    }

    protected override ValueTask DisposeAsync(bool disposing)
    {
        JSCallbackManager.DisposeObject(Id);
        return base.DisposeAsync(disposing);
    }
}